<div class="container card shadow my-5">
    <div class="card-body">
        <div class="row">
            <div class="col-md-2 mb-1">
                <h5>Find a Company</h5>
            </div>
            <div *ngFor="let setting of settings" class="mb-3" [ngClass]="setting.sizeClass">
                <ngx-select-dropdown class="ng-pristine ng-valid ng-touched" *ngIf="setting.options"
                    (change)="changeValue(setting.filterField, $event)"                    
                    [config]="{height: '400px', setting: setting.filterField, displayKey: setting.displayName, search: true, limitTo:setting.limit, placeholder: setting.placeholder}"
                    [options]="setting.options" [multiple]="true"></ngx-select-dropdown>
            </div>
            <div class="col-md-1 mb-2">
                <button class="btn btn-sm btn-transparent primary-dark" (click)="filter()">Filter</button>
            </div>
        </div>
            <div class="row bg-light-grey p-4 w" *ngIf="multiSelect && multiSelect.length > 0">
                Active filters
                <div class="col-md-10">
                    <div *ngFor="let item of multiSelect" (click)="removeCriteria(item)" class="criteria-tag d-inline-block">
                        {{ item.name }} <i class="ti-close ml-2 small"></i>
                    </div>
                </div>
            </div>
    </div>
</div>